<template>
  <div style="width: 100%; height: 100%; padding: 10px 0" class="column-flex">
    <div
      class="
        risk-assets
        sp-flex
        border-top-linear border-bottom-linear border-color
      "
      v-for="item in dataArr"
    >
      <div class="left" @click="openDialog(item)">
        <span class="omit">{{ item.assetTypeName }}</span>
        <p class="bold-blue">{{ item.typeTotal }}</p>
      </div>
      <div class="right">
        <div class="single">
          <div class="s-left">
            <div class="s-l-title">{{ item.assetName || "--" }}</div>
            <div class="s-l-bottom">
              <span
                >{{ item.ip || "-.-.-.-" }}｜ {{ item.orgName || "--" }}/{{
                  item.userName || "--"
                }}
              </span>
            </div>
          </div>
          <div class="s-right">
            <div class="s-r-s">
              <div class="bold-blue s-l-title">{{ item.eventTotal }}</div>
              <span>告警（条）</span>
            </div>
            <div class="s-r-s">
              <div class="bold-blue s-l-title">{{ item.loopholeTotal }}</div>
              <span>漏洞（个）</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},

  props: {
    dataArr: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    openDialog(item) {
      this.$emit("openDialog", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.risk-assets {
  height: 25%;
  padding: 0.625rem 0.625rem 0.625rem 0.3125rem;
  overflow: hidden;
  margin-bottom: 5px;
  font-size: 1rem;
  &:last-of-type {
    margin-bottom: 0;
  }
  .left {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 0.625rem;
    cursor: pointer;
    p {
      height: 1.875rem;

      background: url(../../assets/images/gfxzc@2x.png) no-repeat center center;
      background-size: 3.75rem 100%;
    }
  }
  .right {
    width: 85%;
    height: 100%;

    .single {
      width: 100%;
      display: flex;
      height: 100%;
      align-items: center;
      &:nth-of-type(1) {
        // padding-top: 0;
      }
      .s-left {
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .s-l-title {
          font-size: 12px;
          margin-bottom: 5px;
        }
        .s-l-bottom {
          font-family: SourceHanSansCN-Normal;
          font-size: 1rem;
          color: rgba(191, 217, 255, 0.85);
          font-weight: 400;
        }
      }
      .s-right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        .s-r-s {
          margin-left: 10px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          span {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>